<template>
  <a-drawer
    :label-col="4"
    :visible="open"
    :wrapper-col="14"
    width="35%"
    @close="onClose">
    <template slot="title">
      <b>{{ formTitle }}</b>
    </template>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item
        label="布局图片"
        prop="layoutImages">
        <a-upload
          :before-upload="beforeUpload"
          :show-upload-list="false"
          class="avatar-uploader-layout"
          list-type="picture-card"
          name="layoutImages"
          @change="handleChange"
        >
          <img
            v-if="previewImage"
            :src="previewImage"
            alt="layoutImages"
            style="width: 100%">
          <div v-else style="width: 100%">
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              Upload
            </div>
          </div>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="布局类型" prop="layoutType">
        <a-select v-model="form.layoutType" placeholder="请选择布局类型" style="width: 100%" >
          <a-select-option v-for="(d, index) in layoutTypeOptions" :key="index" :value="d.dictValue">
            {{ d.dictLabel }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="布局名称" prop="layoutName">
        <a-input v-model="form.layoutName" placeholder="请输入布局名称" />
      </a-form-model-item>
      <a-form-model-item label="建筑面积" prop="buildingArea">
        <a-input
          v-model="form.buildingArea"
          addon-after="㎡"
          placeholder="请输入建筑面积" />
      </a-form-model-item>
      <a-form-model-item label="装修费用" prop="decorateFee">
        <a-input
          v-model="form.decorateFee"
          addon-after="元"
          placeholder="请输入装修费用" />
      </a-form-model-item>
      <a-form-model-item label="日常维护费用" prop="maintenanceFee">
        <a-input
          v-model="form.maintenanceFee"
          addon-after="元"
          placeholder="请输入装修费用" />
      </a-form-model-item>
      <a-form-model-item label="电费" prop="electricity">
        <a-input
          v-model="form.electricity"
          addon-after="元"
          placeholder="请输入电费" />
      </a-form-model-item>
      <a-form-model-item label="水费" prop="water">
        <a-input
          v-model="form.water"
          addon-after="元"
          placeholder="请输入水费" />
      </a-form-model-item>
      <a-form-model-item label="容量" prop="capacity">
        <a-input
          v-model="form.capacity"
          addon-after="人"
          placeholder="请输入容量" />
      </a-form-model-item>
      <a-form-model-item label="配套设施" prop="equipments">
        <a-select v-model="form.equipments" mode="tags" placeholder="请选择配套设施" style="width: 100%">
          <a-select-option v-for="(d, index) in equipmentOptions" :key="index" :value="d.dictValue">
            {{ d.dictLabel }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="功能描述" prop="description">
        <a-input v-model="form.description" :rows="4" allow-clear placeholder="请输入内容" type="textarea" />
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="onClose">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { updateCaseLayout, caseLayoutImages } from '@/api/instance/caseLayout'
export default {
  name: 'LayoutCreateForm',
  props: {
  },
  data () {
    return {
      // 布局类型
      layoutTypeOptions: [],
      // 酒店类型
      hotelTypeOptions: [],
      // 配套设施
      equipmentOptions: [],
      // 加载
      loading: false,
      // 展示图片
      previewImage: null,
      // 抽屉是否打开
      open: false,
      // 表单标题
      formTitle: '',
      // 表单参数
      form: {
        layoutId: undefined,
        layoutImages: undefined,
        layoutName: undefined,
        layoutType: undefined,
        description: undefined,
        capacity: undefined,
        equipment: undefined,
        equipments: undefined,
        buildingArea: undefined,
        decorateFee: undefined,
        electricity: undefined,
        water: undefined,
        maintenanceFee: undefined,
        remark: undefined
      },
      // 校验参数
      rules: {
        layoutImages: [{ required: true, message: '布局图片不能为空', trigger: 'change' }],
        layoutType: [{ required: true, message: '布局类型不能为空', trigger: 'change' }],
        layoutName: [{ required: true, message: '布局名称不能为空', trigger: 'change' }],
        buildingArea: [{ required: true, message: '建筑面积不能为空', trigger: 'change' }],
        decorateFee: [{ required: true, message: '装修费用不能为空', trigger: 'change' }],
        electricity: [{ required: true, message: '电费不能为空', trigger: 'change' }],
        water: [{ required: true, message: '水费不能为空', trigger: 'change' }],
        maintenanceFee: [{ required: true, message: '日常维护费用不能为空', trigger: 'change' }],
        capacity: [{ required: true, message: '容量不能为空', trigger: 'change' }],
        equipments: [{ required: true, message: '配套设施不能为空', trigger: 'change' }]
      }
    }
  },
  filters: {},
  created () {
    // 布局类型字典
    this.getDicts('layout_type').then(response => {
      this.layoutTypeOptions = response.data
    })
    // 案例类型字典
    this.getDicts('hotel_type').then(response => {
      this.hotelTypeOptions = response.data
    })
    // 配套设施
    this.getDicts('equipment').then(response => {
      this.equipmentOptions = response.data
    })
  },
  computed: {},
  watch: {},
  mounted () {
  },
  methods: {
    /** 布局类型字典翻译 */
    layoutTypeFormat (val) {
      return this.selectDictLabel(this.layoutTypeOptions, val)
    },
    /** 关闭抽屉 */
    onClose () {
      this.open = false
    },
    /** 表单重置 */
    reset () {
      this.fileData = undefined
      this.form = {
        layoutId: undefined,
        layoutImages: undefined,
        layoutName: undefined,
        layoutType: undefined,
        description: undefined,
        capacity: undefined,
        equipment: undefined,
        buildingArea: undefined,
        decorateFee: undefined,
        electricity: undefined,
        water: undefined,
        maintenanceFee: undefined,
        remark: undefined
      }
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset()
      this.form = { ...row }
      this.form.equipments = row.equipment.split(',')
      this.previewImage = this.form.layoutImages
      this.open = true
      this.formTitle = '修改布局'
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.fileData) {
            const formData = new FormData()
            formData.append('layoutImages', this.fileData)
            // 文件上传
            caseLayoutImages(formData).then(response => {
              this.form.layoutImages = process.env.VUE_APP_BASE_API + response.imgUrl
              this.handleSubmit()
            })
          } else {
            this.handleSubmit()
          }
        } else {
          return false
        }
      })
    },
    handleSubmit () {
      this.form.equipment = this.form.equipments.toString()
      if (this.form.layoutId !== undefined && this.form.layoutId !== null) {
        updateCaseLayout(this.form).then(response => {
          this.$message.success(
            '修改成功',
            3
          )
          this.open = false
          this.$emit('ok')
        })
      }
    },
    /** 上传前校验 */
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('请选择图片上传')
        return
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('文件大小不能超过2M')
        return
      }

      const reader = new FileReader()
      // 把Array Buffer转化为blob 如果是base64不需要
      // 转化为base64
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.previewImage = reader.result
      }
      // 转化为blob
      // reader.readAsArrayBuffer(file)

      return false
    },
    /** 文件改变 */
    handleChange (f) {
      this.fileData = f.file
      this.form.layoutImages = f
    }
  }
}
</script>

<style scoped>

</style>
